﻿@inherits LayoutComponentBase
@layout MainLayout

<MudLayout Class="mudblazor-docs">
    <MudAppBar Class="docs-appbar-filter" Color="Color.Transparent" Elevation="0"></MudAppBar>
    <MudAppBar Class="docs-appbar" Elevation="0">
        <Appbar DrawerToggleCallback="ToggleDrawer" />
    </MudAppBar>
    <MudDrawer Open="@_drawerOpen" OpenChanged="OnDrawerOpenChanged" ClipMode="DrawerClipMode.Docked" Elevation="0" Breakpoint="Breakpoint.Md" aria-label="Navigation Drawer">
        <div class="d-block d-md-none">
            <MudToolBar Dense="true" Gutters="false" Class="docs-gray-bg">
                <MudIconButton Icon="@Icons.Material.Rounded.Close" Color="Color.Inherit" OnClick="ToggleDrawer" aria-label="Toggle drawer" />
                <MudSpacer />
                <AppbarButtons />
            </MudToolBar>

            @if (_topMenuOpen == true)
            {
                <MudNavMenu Color="Color.Primary" Margin="Margin.Dense" Rounded="true" Class="pa-2">
                    <MudNavLink Href="/getting-started/installation">Get Started</MudNavLink>
                    <MudNavLink Href="/docs/overview">Docs</MudNavLink>
                    <MudNavLink Href="/mud/introduction" Match="NavLinkMatch.All">Learn More</MudNavLink>
                    <MudNavGroup Title="Products" ExpandIcon="@Icons.Material.Filled.ExpandMore">
                        <MudNavLink Href="https://mudblazor.com/">MudBlazor</MudNavLink>
                        <MudNavLink Href="https://try.mudblazor.com/">TryMudBlazor</MudNavLink>
                        <MudNavLink Href="https://github.com/MudBlazor/ThemeManager">ThemeManager</MudNavLink>
                        <MudNavLink Href="https://github.com/MudBlazor/Templates">Templates</MudNavLink>
                        <MudListSubheader Class="mt-4 pl-8 pb-2"><b>Coming soon</b></MudListSubheader>
                        <MudNavLink Disabled="true">MudExtensions</MudNavLink>
                    </MudNavGroup>
                </MudNavMenu>
            }
        </div>
        <MudNavMenu Color="Color.Primary" Rounded="true" Dense="true" Margin="Margin.Dense" Class="pa-2 overflow-auto mb-3">
            <NavMenu @ref="@_navMenuRef" />
        </MudNavMenu>
    </MudDrawer>
    @Body
    <MudScrollToTop TopOffset="400" Style="z-index:2000;">
        <MudFab StartIcon="@Icons.Material.Filled.KeyboardArrowUp" Color="Color.Primary" />
    </MudScrollToTop>
</MudLayout>